<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>



<link rel="stylesheet" type="text/css" href="css/base_info.css"/>
<link rel="stylesheet" type="text/css" href="css/common/common.css"/>
<body>
<div id="web">
    <header class="clearfix">
        <div class="logo fl">
            <div>
                <img src="img/logo.png" />
            </div>
        </div>
        <ul class="navbar fl clearfix">
            <li><a href="../index.html">首页</a></li>
            <li>
                <a href="">骑行</a>
                <div class="header-info clearfix">
                    <div class="fl clearfix">
                        <h4>普通版</h4>
                        <ul class="text fl">
                            <li><a href=""">短袖</a></li>
                            <li><a href="">短裤</a></li>
                            <li><a href="">长袖</a></li>
                            <li><a href="">长裤</a> </li>
                            <li><a href="">背带短裤</a></li>
                            <li><a href="">背带长裤</a> </li>
                        </ul>
                        <ul class="fl">
                            <li><a href="">短袖连体服</a> </li>
                            <li><a href="">长袖连体服</a> </li>
                            <li><a href="">儿童版短袖</a></li>
                            <li><a href="">儿童版长袖</a></li>
                        </ul>
                    </div>
                    <div class="fl clearfix">
                        <h4>竞技版</h4>
                        <ul class="fl">
                            <li><a href="">短袖</a></li>
                            <li><a href="">短裤</a></li>
                            <li><a href="">长袖</a></li>
                            <li><a href="">长裤</a> </li>
                            <li><a href="">背带短裤</a></li>
                            <li><a href="">背带长裤</a> </li>
                        </ul>
                        <ul class="fl">
                            <li><a href="">短袖连体服</a> </li>
                            <li><a href="">长袖连体服</a> </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a href="">铁三</a></li>
            <li><a href="">跑步</a></li>
            <li><a href="">设计师入驻</a></li>
            <li>
                <a href="shopList.html">品牌专区</a>
            </li>
        </ul>
        <ul class="nav-img fl clearfix">
            <li>
                <div class="search">
                    <input type="search"  placeholder="上衣"/>
                    <input type="image" onclick="window.location.href='search.html'" src="img/search.gif" />
                </div>
            </li>
            <li>
                <div class="shop_car" onclick="window.location.href='BE-Project/flow1.html'">
                    <img src="img/shopping_car.png"/>
                </div>
            </li>
            <li class="per">
                <div class="person">
                    <img src="img/person.png"/>
                </div>
                <div class="lo">
                    <p><a href="login.html">登录</a></p>
                    <p><a href="reg.html">注册</a></p>
                    <p><a href="openShop.html">我要开店</a></p>
                </div>
            </li>
            <li>
                <div class="tel">
                    <img src="img/tel.jpg"/>
                </div>
            </li>
            <li>
                <div class="language">
                    <img src="img/language.png" />
                </div>
            </li>
        </ul>
    </header>
    <section>
        <div class="place">
            <a href="index.html">首页</a><span>></span><a href="">我的不二定制</a><span>></span><a
                href="">我的账户</a><span>></span><a href="" class="a_active">基本信息</a>
        </div>
        <div class="box clearfix">
            <div class="box-left fl clearfix">
                <div class="face">
                    <div class="img-box">
                        <img src="img/base_info/face.png"/>
                    </div>
                    <span style="padding-left: 223px;line-height: 50px">SUPER12</span><img class="face-icon"
                                                                                           src="img/safe/face-icon.png"/>
                </div>
                <div class="nav_left">
                    <div class="wrap">
                      	<ul>
                            <li><a href="../BE-Project/details.html">我的订单</a></li>
                            <li><a href="../BE-Project/return.html">退货退款</a></li>
                            <li><a href="">申请售后</a></li>
                            <li><a href="../BE-Project/order-evaluation.html">我要评价</a></li>
                       </ul>
                        <ul>
                            <li><a href="my_works.html">我的作品</a></li>
                        </ul>
                        <ul>
                            <li><a href="open_shop.html">我的店铺</a></li>
                            <li><a href="open_shop.html">查看店铺</a></li>
                            <li><a href="shop_manage.html">店铺管理</a></li>
                            <li><a href="shop_set.html">店铺设置</a></li>
                            <li><a href="goods_sold.html">已卖出的商品</a></li>
                            <li><a href="goods_manage.html">商品管理</a></li>
                        </ul>
                        <ul>
                            <li><a href="">我的收益</a></li>
                            <li><a href="goods_acc.html">商品结算</a></li>
                            <li><a href="money_apply.html">提现申请</a></li>
                            <li><a href="money_detail.html">资金明细</a></li>
                        </ul>
                        <ul>
                            <li><a href="email_link.html">我的账户</a></li>
                            <li><a href="base_info.html" class="now">基本信息</a></li>
                            <li><a href="my_address.html">我的地址</a></li>
                            <li><a href="bind.html">账号绑定</a></li>
                            <li><a href="safe.html">账号安全</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box-right fl">
                <h3>基本信息</h3>
                <div class="user-data">
                    <div class="user-wrap">
                        <span style="vertical-align: middle;">用户头像</span>
                        <label for="xFile" style="display: inline-block;vertical-align: middle;margin-left: 20px"><img src="img/base_info/face.png"/></label>

                                <input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);width: 100px;height: 100px">

                        <div class="inform">
                            <div class="circle"><span style="color: white;margin-left: 6px">!</span></div>
                            <span style="font-size: 13px;vertical-align: middle;line-height: 40px">支持JPG，JPEG，GIF，PNG，BMP，且小于5M</span>
                        </div>
                        <span>登录帐号</span> <span style="padding-left: 16px">15820208318</span>
                        <p style="margin-top:22px">昵称</p>
                        <form id="demoForm">
                        <input type="text" name="name" id="name"/>
                        </form>

                        <p style="color: red;margin-top: 10px;font-size: 12px">4-32个字符，支持中英文、数字或“_”。注意：不能用纯数字或“_”</p>
                        <p style="margin-top: 22px">性别</p>

                        <select class="birthday gender">
                            <option>男</option>
                            <option>女</option>
                        </select>

                        <p style="margin-top: 22px">生日</p>
                        <select class="birthday">
                            <option>年</option>
                            <option>2017</option>
                            <option>2016</option>
                            <option>2015</option>
                            <option>2014</option>
                            <option>2013</option>
                            <option>2012</option>
                            <option>2011</option>
                            <option>2010</option>
                        </select>
                        <select class="birthday month">
                            <option>月</option>
                            <option>12</option>
                            <option>11</option>
                            <option>10</option>
                            <option>9</option>
                            <option>8</option>
                            <option>7</option>
                            <option>6</option>
                            <option>5</option>
                        </select>
                        <select class="birthday day">
                            <option>日</option>
                            <option>30</option>
                            <option>29</option>
                            <option>28</option>
                            <option>27</option>
                            <option>26</option>
                            <option>25</option>
                            <option>24</option>
                        </select>
                        <p style="margin-top: 22px">所在地区</p>
                        <select class="birthday city">
                            <option>选择城市</option>
                            <option>北京</option>
                            <option>广州</option>
                            <option>上海</option>
                        </select>
                        <select class="birthday qu">
                            <option>选择地区</option>
                            <option>北京</option>
                            <option>广州</option>
                            <option>上海</option>
                        </select>
                        <p style="margin-top: 22px">所在行业</p>
                        <select class="birthday job">
                            <option>选择行业</option>
                            <option>程序员</option>
                            <option>其他</option>
                        </select>
                        <input type="button" id="save" value="保存"/>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="list clearfix">
            <div class="foot-logo fl">
                <img src="img/foot-logo.png"/>
            </div>
            <div class="foot-list fl clearfix">
                <div>
                    <ul>
                        <li><a href="">新手指南</a></li>
                        <li><a href="">用户注册</a></li>
                        <li><a href="">定制流程</a></li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li><a href="">付款方式</a></li>
                        <li><a href="">支付方式</a></li>
                        <li><a href="">支付问题</a></li>
                        <li><a href="">常见问题</a></li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li><a href="">售后服务</a></li>
                        <li><a href="">退款换货</a></li>
                        <li><a href="">配送方式</a></li>
                        <li><a href="">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li><a href="">政策条款</a></li>
                        <li><a href="">服务协议</a></li>
                        <li><a href="">隐私条款</a></li>
                        <li><a href="">版权条款</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <p>© 2016 Wildto Corpation. All Rights Reserved闽ICP备14001544号-1</p>
    </footer>
</div>
<script src="vendor/jquery-1.10.0.js"></script>
<script src="vendor/jquery.validate-1.13.1.js"></script>
<script src="vendor/messages_zh.js"></script>
<script>
    var validator1;
    $(document).ready(function () {
        validator1 = $("#demoForm").validate({
            debug: true,
            rules: {
                name: {
                    required: true,
                    minlength: 4,
                    maxlength: 32
                },
                password: {
                    required: true,
                    minlength: 2,
                    maxlength: 16
                },
                "confirm-password": {
                    equalTo: "#password"
                }
            },
            messages: {
                name: {
                    required: '请输入昵称',
                    minlength: '用户名不能小于4个字符',
                    maxlength: '用户名不能超过32个字符',
                    remote: '用户名不存在'
                },
                password: {
                    required: '请输入密码',
                    minlength: '密码不能小于2个字符',
                    maxlength: '密码不能超过16个字符'
                },
                "confirm-password": {
                    equalTo: "两次输入密码不一致"
                }

            },

            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).fadeOut().fadeIn();
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
            },
            submitHandler: function (form) {
                console.log($(form).serialize())
            }
        });

        $("#check").click(function () {
            console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");
        });
    });
</script>

</body>
</html>
